<template>
	<div class="container">
		<view class="cards">
			<view class="card" v-for="cate in cates" :key="cate.id" @click="toPage(cate.id)">
				<image :src="baseURL+cate.icon"></image>
				<text>{{ cate.name }}</text>
				<image src="../../static/fengxianxuncha/arrow-right.png"></image>
			</view>
		</view>
		<view class="title">预警信息:</view>
		<view class="list">
			<view @click="toRead(item.id)" class="item" v-for="item in items" :key="item.id">
				<view class="top">
					<text class="name">{{ item.title }}</text>
					<text class="time">{{ item.addtime }}</text>
				</view>
				<view class="content">{{ item.content }}</view>
			</view>
		</view>
	</div>
</template>

<script>
export default{
	data(){
		return {
			baseURL: this.$API.baseURL,
			cates: [],
			items: []
		}
	},
	onLoad(option) {
		// #ifdef APP-PLUS
		/* 隐藏凸起图标 */
		var icon = plus.nativeObj.View.getViewById("icon");
		setTimeout(function() {
			if(icon){icon.hide();}
		}, 100);
		// #endif
		
		// 获取数据
		this.getItems(option.cart_id);
	},
	methods: {
		// 阅读
		toRead(id){
			uni.request({
				url:this.$API.readWarningMsg,
				data:{
					id,
					userid: uni.getStorageSync('userid'),
				},
				method:"POST",
				header:this.$API.get_head()
			})
		},
		// 页面跳转
		toPage(cart_id = 0){
			uni.navigateTo({
				url: 'riskAlarm?cart_id='+cart_id
			})
		},
		// 获取列表
		getItems(cart_id = 0){
			let _this = this;
			uni.request({
				method: 'POST',
				url: _this.$API.riskAlarm,
				data: {
					userid: uni.getStorageSync('userid'),
					cart_id
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					_this.cates = res.data.data.carts;
					_this.items = res.data.data.notices;
				}
			})
		}
	}
}
</script>

<style scoped>
page{
	background-color: #F2F2F2 !important;
}
.container{
	padding: 20upx;
}

.title{
	display: inline-block;
	padding: 6upx 20upx;
	color: #fff;
	background: #1791DA;
	border-radius: 16upx;
	margin-bottom: 20upx;
}

/*list*/
.list .item{
	padding: 20upx;
	background: #fff;
	margin-bottom: 20upx;
	border-radius: 16upx;
}
.list .item .top{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.list .item .top .name{
	font-weight: bold;
	padding-left: 20upx;
	position: relative;
}
.list .item .top .name::before{
	content: '';
	width: 3px;
	height: 13px;
	background: #F38413;
	position: absolute;
	top: 10upx;
	left: 0;
}

/*cards*/
.cards .card{
	margin-bottom: 20upx;
	padding: 10upx 20upx;
	background: #fff;
	border-radius: 16upx;
	display: flex;
	align-items: center;
}
.cards .card text{
	color: #777;
	font-size: 32upx;
	font-weight: bold;
}
.cards .card image:first-child{
	width: 90upx;
	height: 80upx;
	margin-right: 20upx;
}
.cards .card image:last-child{
	width: 32upx;
	height: 40upx;
	margin-left: auto;
}

</style>
